<template>
  <div class="lt_slider">
    <div ref="sliderRef" class="lt_slider_bg" @mousedown="startHandler">
      <div
        class="lt_slider_progress"
        :draggable="true"
        :style="{ width: `${sliderActiveLeft}px` }"
      ></div>
      <div class="lt_slider_thumb" :style="{ left: `${sliderActiveLeft}px` }"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
import { ISliderProps, ISliderEmits } from './type'
import useMounseOutAside from '@renderer/hooks/useMounseOutAside'

const props = withDefaults(defineProps<ISliderProps>(), {
  max: 100,
  min: 0
})
const emit = defineEmits<ISliderEmits>()

const sliderRef = useTemplateRef<HTMLDivElement>('sliderRef')

onMounted(() => {
  getPercent()
  document.addEventListener('resize', getPercent)
  document.addEventListener('mousemove', dragHandler)
  document.addEventListener('mouseup', endHandler)
})
onUnmounted(() => {
  document.removeEventListener('resize', getPercent)
  document.removeEventListener('mousemove', dragHandler)
  document.removeEventListener('mouseup', endHandler)
})

// modelValue的值改变时，重新计算sliderActiveLeft的值
watch(
  () => props.modelValue,
  () => {
    getPercent()
  }
)

// 动态计算modelValue所占的百分比
const sliderActiveLeft = ref(0)
const getPercent = () => {
  let parent = 0
  if (sliderRef.value) {
    parent = (sliderRef.value.offsetWidth * props.modelValue) / props.max
  }

  sliderActiveLeft.value = parent
}

// 开始拖动滚动条并返回最新的modelValue
const xStar = ref(0)
const isDrag = ref(false)
const startHandler = (e: MouseEvent) => {
  isDrag.value = true
  xStar.value = e.offsetX // 记录鼠标按下的位置
  xStar.value = sliderActiveLeft.value
}
const dragHandler = (e: MouseEvent) => {
  if (isDrag.value) {
    console.log(e)
    // const newSliderWidth =
    //   e.offsetX > sliderRef.value.offsetWidth ? sliderRef.value.offsetWidth : e.offsetX
    // sliderActiveLeft.value = newSliderWidth
    // const newModelValue = (newSliderWidth * props.max) / sliderRef.value.offsetWidth
    // console.log(newModelValue)
    // emit('update:modelValue', newModelValue)
  }
}
const endHandler = (e: MouseEvent) => {
  const flag = useMounseOutAside(sliderRef, e)
  if (flag) return
  if (sliderRef.value && isDrag.value) {
    const newSliderWidth =
      e.offsetX > sliderRef.value.offsetWidth ? sliderRef.value.offsetWidth : e.offsetX
    sliderActiveLeft.value = newSliderWidth
    const newModelValue = (newSliderWidth * props.max) / sliderRef.value.offsetWidth
    emit('update:modelValue', newModelValue)
    emit('change', newModelValue)
  }
  isDrag.value = false
}
</script>

<style scoped lang="scss">
@import './style.css';
.lt_slider {
  height: var(--slider-width);
  height: var(--slider-height);
  position: relative;
  cursor: pointer;

  .lt_slider_bg {
    height: var(--slider-height);
    height: var(--slider-width);
    border-radius: var(--slider-thumb-border-radius);
    background-color: var(--slider-background-color);

    .lt_slider_progress {
      height: 6px;
      border-radius: var(--slider-thumb-border-radius);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      transition: all 0.1s ease;
      background-color: var(--slider-active-background-color);
    }

    .lt_slider_thumb {
      width: var(--slider-thumb-size);
      height: var(--slider-thumb-size);
      position: absolute;
      top: var(--slider-thumb-ofset-top);
      transition: all 0.1s ease;
      background-color: var(--slider-thumb-background-color);
      border-radius: 50%;
      border: 2px solid var(--slider-thumb-border-color);

      &:hover {
        --slider-thumb-size: 17px;
        --slider-thumb-ofset-top: -6px;
      }
    }
  }
}
</style>
